<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta charset="utf-8">
	<title>智能“小黄”后台监管平台</title>
	<meta content='width=device-width, initial-scale=1.0, shrink-to-fit=no' name='viewport' />
	<link rel="icon" href="../assets/img/icon.ico" type="image/x-icon"/>
	
	<!-- Fonts and icons -->
	<script src="../assets/js/plugin/webfont/webfont.min.js"></script>
	<script>
		WebFont.load({
			google: {"families":["Open+Sans:300,400,600,700"]},
			custom: {"families":["Flaticon", "Font Awesome 5 Solid", "Font Awesome 5 Regular", "Font Awesome 5 Brands"], urls: ['../assets/css/fonts.css']},
			active: function() {
				sessionStorage.fonts = true;
			}
		});
	</script>

	<!-- CSS Files -->
	<link rel="stylesheet" href="../assets/css/bootstrap.min.css">
	<link rel="stylesheet" href="../assets/css/azzara.min.css">
	<!-- CSS Just for demo purpose, don't include it in your project -->
	<link rel="stylesheet" href="../assets/css/demo.css">
</head>
<body>
	<div class="wrapper">
		<!--
			Tip 1: You can change the background color of the main header using: data-background-color="blue | purple | light-blue | green | orange | red"
		-->
		<div class="main-header" data-background-color="orange">
			<!-- Logo Header -->
			<div class="logo-header">
				
				<a href="homepage.html" class="logo">
					<img src="../assets/img/logoazzara.svg" height="100%" alt="navbar brand" class="navbar-brand">
				</a>
				<button class="navbar-toggler sidenav-toggler ml-auto" type="button" data-toggle="collapse" data-target="collapse" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon">
						<i class="fa fa-bars"></i>
					</span>
				</button>
				<button class="topbar-toggler more"><i class="fa fa-ellipsis-v"></i></button>
				<div class="navbar-minimize">
					<button class="btn btn-minimize btn-rounded">
						<i class="fa fa-bars"></i>
					</button>
				</div>
			</div>
			<!-- End Logo Header -->

			<!-- Navbar Header -->
			<nav class="navbar navbar-header navbar-expand-lg">
				
				<div class="container-fluid">
					<div class="collapse" id="search-nav">
						<form class="navbar-left navbar-form nav-search mr-md-3">
							<div class="input-group">
								<div class="input-group-prepend">
									<button type="submit" class="btn btn-search pr-1">
										<i class="fa fa-search search-icon"></i>
									</button>
								</div>
								<input type="text" placeholder="搜索 ..." class="form-control">
							</div>
						</form>
					</div>
					<ul class="navbar-nav topbar-nav ml-md-auto align-items-center">
						<li class="nav-item toggle-nav-search hidden-caret">
							<a class="nav-link" data-toggle="collapse" href="#search-nav" role="button" aria-expanded="false" aria-controls="search-nav">
								<i class="fa fa-search"></i>
							</a>
						</li>
						<li class="nav-item dropdown hidden-caret">
							<a class="nav-link dropdown-toggle" href="#" id="messageDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<i class="fa fa-envelope"></i>
							</a>
							<ul class="dropdown-menu messages-notif-box animated fadeIn" aria-labelledby="messageDropdown">
								<li>
									<div class="dropdown-title d-flex justify-content-between align-items-center">
										消息 									
										<a href="#" class="small">全部标记已读</a>
									</div>
								</li>
								<li>
									<div class="message-notif-scroll scrollbar-outer">
										<div class="notif-center">
											<a href="#">
												<div class="notif-img"> 
													<img src="../assets/img/chadengle.jpg" alt="Img Profile">
												</div>
												<div class="notif-content">
													<span class="subject">刘淑薇</span>
													<span class="block">
														我遇到了点问题
													</span>
													<span class="time">12分钟前</span> 
												</div>
											</a>
											<a href="#">
												<div class="notif-img"> 
													<img src="../assets/img/talha.jpg" alt="Img Profile">
												</div>
												<div class="notif-content">
													<span class="subject">鲁阳星</span>
													<span class="block">
														我今天请个假噢！
													</span>
													<span class="time">7天前</span> 
												</div>
											</a>
										</div>
									</div>
								</li>
								<li>
									<a class="see-all" href="javascript:void(0);">查看全部<i class="fa fa-angle-right"></i> </a>
								</li>
							</ul>
						</li>
						<li class="nav-item dropdown hidden-caret">
							<a class="nav-link dropdown-toggle" href="#" id="notifDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<i class="fa fa-bell"></i>
								<span class="notification">3</span>
							</a>
							<ul class="dropdown-menu notif-box animated fadeIn" aria-labelledby="notifDropdown">
								<li>
									<div class="dropdown-title">三条新消息通知</div>
								</li>
								<li>
									<div class="notif-scroll scrollbar-outer">
										<div class="notif-center">
											<a href="#">
												<div class="notif-icon notif-primary"> <i class="fa fa-user-plus"></i> </div>
												<div class="notif-content">
													<span class="block">
														团队新成员加入
													</span>
													<span class="time">5天前</span> 
												</div>
											</a>
											<a href="#">
												<div class="notif-icon notif-success"> <i class="fa fa-comment"></i> </div>
												<div class="notif-content">
													<span class="block">
														有人评论了你
													</span>
													<span class="time">12天前</span> 
												</div>
											</a>
											<a href="#">
												<div class="notif-icon notif-danger"> <i class="fa fa-heart"></i> </div>
												<div class="notif-content">
													<span class="block">
														有人为你点赞
													</span>
													<span class="time">17天前</span> 
												</div>
											</a>
										</div>
									</div>
								</li>
								<li>
									<a class="see-all" href="javascript:void(0);">查看全部<i class="fa fa-angle-right"></i> </a>
								</li>
							</ul>
						</li>
						<li class="nav-item dropdown hidden-caret">
							<a class="dropdown-toggle profile-pic" data-toggle="dropdown" href="#" aria-expanded="false">
								<div class="avatar-sm">
									<img src="../assets/img/profile.jpg" alt="..." class="avatar-img rounded-circle">
								</div>
							</a>
							<ul class="dropdown-menu dropdown-user animated fadeIn">
								<li>
									<div class="user-box">
										<div class="avatar-lg"><img src="../assets/img/profile.jpg" alt="image profile" class="avatar-img rounded"></div>
										<div class="u-text">
											<h4>黄家名</h4>
											<p class="text-muted">hhuchjm@hhu.edu.cn</p><a href="userprofile.html" class="btn btn-rounded btn-secondary btn-sm">个人资料</a>
										</div>
									</div>
								</li>
								<li>
									<div class="dropdown-divider"></div>
									<a class="dropdown-item" href="userprofile.html">我的个人信息</a>
									<a class="dropdown-item" href="setting.html">账户设置</a>
									<div class="dropdown-divider"></div>
									<a class="dropdown-item" href="index.html">退出登录</a>
								</li>
							</ul>
						</li>
						
					</ul>
				</div>
			</nav>
			<!-- End Navbar -->
		</div>

		<!-- Sidebar -->
		<div class="sidebar">
			
			<div class="sidebar-background"></div>
			<div class="sidebar-wrapper scrollbar-inner">
				<div class="sidebar-content">
					<div class="user">
						<div class="avatar-sm float-left mr-2">
							<img src="../assets/img/profile.jpg" alt="..." class="avatar-img rounded-circle">
						</div>
						<div class="info">
							<a data-toggle="collapse" href="#collapseExample" aria-expanded="true">
								<span>
									黄家名
									<span class="user-level">管理员</span>
									<span class="caret"></span>
								</span>
							</a>
							<div class="clearfix"></div>

							<div class="collapse in" id="collapseExample">
								<ul class="nav">
									<li>
										<a href="userprofile.html">
											<span class="link-collapse">我的资料</span>
										</a>
									</li>
									<li>
										<a href="setting.html">
											<span class="link-collapse">设置</span>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<ul class="nav">
						<li class="nav-item active">
							<a href="homepage.html">
								<i class="fas fa-home"></i>
								<p>主页</p>
								<span class="badge badge-count">5</span>
							</a>
						</li>
						<li class="nav-section">
							<span class="sidebar-mini-icon">
								<i class="fa fa-ellipsis-h"></i>
							</span>
							<h4 class="text-section">管理功能</h4>
						</li>
						<li class="nav-item">
							<a data-toggle="collapse" href="#base">
								<i class="fas fa-id-card-alt"></i>
								<p>员工管理</p>
								<span class="caret"></span>
							</a>
							<div class="collapse" id="base">
								<ul class="nav nav-collapse">
									<li>
										<a href="workerinfo.html">
											<span class="sub-item">员工信息</span>
										</a>
									</li>
									<li>
										<a href="worktime.html">
											<span class="sub-item">工时统计</span>
										</a>
									</li>
									<li>
										<a href="#">
											<span class="sub-item">备用</span>
										</a>
									</li>
								</ul>
							</div>
						</li>
						<li class="nav-item">
							<a data-toggle="collapse" href="#forms">
								<i class="fas fa-people-carry"></i>
								<p>工况管理</p>
								<span class="caret"></span>
							</a>
							<div class="collapse" id="forms">
								<ul class="nav nav-collapse">
									<li>
										<a href="condition.html">
											<span class="sub-item">工地环境</span>
										</a>
									</li>
									<li>
										<a href="#">
											<span class="sub-item">备用</span>
										</a>
									</li>
								</ul>
							</div>
						</li>
						<li class="nav-item">
							<a data-toggle="collapse" href="#tables">
								<i class="fas fa-video"></i>
								<p>视频管理</p>
								<span class="caret"></span>
							</a>
							<div class="collapse" id="tables">
								<ul class="nav nav-collapse">
									<li>
										<a href="videoguide.html">
											<span class="sub-item">视频指导</span>
										</a>
									</li>
									<li>
										<a href="videolog.html">
											<span class="sub-item">视频日志</span>
										</a>
									</li>
									<li>
										<a href="#">
											<span class="sub-item">备用</span>
										</a>
									</li>
								</ul>
							</div>
						</li>
						<li class="nav-item">
							<a data-toggle="collapse" href="#maps">
								<i class="fas fa-smile-beam"></i>
								<p>备用</p>
								<span class="caret"></span>
							</a>
							<div class="collapse" id="maps">
								<ul class="nav nav-collapse">
									<li>
										<a href="#">
											<span class="sub-item">备用</span>
										</a>
									</li>

									
								</ul>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- End Sidebar -->
		<div class="main-panel">
			<div class="content">
				<div class="page-inner">
					<div class="page-header">
						<h4 class="page-title">主页</h4>
					</div>
					<div class="row">
						<div class="col-sm-6 col-md-3">
							<div class="card card-stats card-round">
								<div class="card-body ">
									<div class="row align-items-center">
										<div class="col-icon">
											<div class="icon-big text-center icon-success bubble-shadow-small">
												<i class="fas fa-user-friends"></i>
											</div>
										</div>
										<div class="col col-stats ml-3 ml-sm-0">
											<div class="numbers">
												<p class="card-category">平台用户</p>
												<h4 class="card-title">94</h4>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-sm-6 col-md-3">
							<div class="card card-stats card-round">
								<div class="card-body">
									<div class="row align-items-center">
										<div class="col-icon">
											<div class="icon-big text-center icon-info bubble-shadow-small">
												<i class="fas fa-map-marked-alt"></i>
											</div>
										</div>
										<div class="col col-stats ml-3 ml-sm-0">
											<div class="numbers">
												<p class="card-category">覆盖地区</p>
												<h4 class="card-title">33个</h4>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-sm-6 col-md-3">
							<div class="card card-stats card-round">
								<div class="card-body">
									<div class="row align-items-center">
										<div class="col-icon">
											<div class="icon-big text-center icon-danger bubble-shadow-small">
												<i class="fas fa-hand-holding-usd"></i>
											</div>
										</div>
										<div class="col col-stats ml-3 ml-sm-0">
											<div class="numbers">
												<p class="card-category">售出数量</p>
												<h4 class="card-title">1300个</h4>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-sm-6 col-md-3">
							<div class="card card-stats card-round">
								<div class="card-body">
									<div class="row align-items-center">
										<div class="col-icon">
											<div class="icon-big text-center icon-secondary bubble-shadow-small">
												<i class="far fa-check-circle"></i>
											</div>
										</div>
										<div class="col col-stats ml-3 ml-sm-0">
											<div class="numbers">
												<p class="card-category">总产量</p>
												<h4 class="card-title">5000个</h4>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row row-card-no-pd">
						<div class="col-md-12">
							<div class="card">
								<div class="card-header">
									<div class="card-head-row">
										<h4 class="card-title">覆盖区域</h4>
										<div class="card-tools">
											<button class="btn btn-icon btn-link btn-primary btn-xs"><span class="fa fa-angle-down"></span></button>
											<button class="btn btn-icon btn-link btn-primary btn-xs btn-refresh-card"><span class="fa fa-sync-alt"></span></button>
											<button class="btn btn-icon btn-link btn-primary btn-xs"><span class="fa fa-times"></span></button>
										</div>
									</div>
									<p class="card-category">
									我们生产的安全帽主要涉及了以下区域</p>
								</div>
								<div class="card-body">
									<div class="row">
										<div class="col-md-6">
											<div class="table-responsive table-hover table-sales">
												<table class="table">
													<tbody>
														<tr>
															<td>
																<div class="flag">
																	<img src="../assets/img/flags/cn.png" alt="indonesia">
																</div>
															</td>
															<td>北京市</td>
															<td class="text-right">
																548
															</td>
															<td class="text-right">
																42.18%
															</td>
														</tr>
														<tr>
															<td>
																<div class="flag">
																	<img src="../assets/img/flags/cn.png" alt="united states">
																</div>
															</td>
															<td>江苏省常州市</td>
															<td class="text-right">
																57
															</td>
															<td class="text-right">
																4.36%
															</td>
														</tr>
														<tr>
															<td>
																<div class="flag">
																	<img src="../assets/img/flags/cn.png" alt="australia">
																</div>
															</td>
															<td>江苏省无锡市</td>
															<td class="text-right">
																28
															</td>
															<td class="text-right">
																2.16%
															</td>
														</tr>
														<tr>
															<td>
																<div class="flag">
																	<img src="../assets/img/flags/cn.png" alt="russia">
																</div>
															</td>
															<td>山西省太原市</td>
															<td class="text-right">
																255
															</td>
															<td class="text-right">
																19.65%
															</td>
														</tr>
														<tr>
															<td>
																<div class="flag">
																	<img src="../assets/img/flags/cn.png" alt="china">
																</div>
															</td>
															<td>陕西省西安市</td>
															<td class="text-right">
																260
															</td>
															<td class="text-right">
																20%
															</td>
														</tr>
														<tr>
															<td>
																<div class="flag">
																	<img src="../assets/img/flags/cn.png" alt="brazil">
																</div>
															</td>
															<td>内蒙古呼和浩特</td>
															<td class="text-right">
																152
															</td>
															<td class="text-right">
																11.63%
															</td>
														</tr>
													</tbody>
												</table>
											</div>
										</div>
										<div class="col-md-6">
											<div class="mapcontainer">
												<div id="map-example" class="vmap"></div>
												<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.ToolBar,AMap.ElasticMarker"></script>
												<script>
													var map = new AMap.Map('map-example', {
														resizeEnable: true, //是否监控地图容器尺寸变化
														zoom:11, //初始化地图层级
														center: [116.397428, 39.90923] //初始化地图中心点
													});
													map.plugin(["AMap.ToolBar"], function() {
														map.addControl(new AMap.ToolBar());
													});
													var infoWindow = new AMap.InfoWindow({ //创建信息窗体
        												isCustom: true,  //使用自定义窗体
        												content:'<div style="height: 22px;width: 55px;background-color: white;border-radius: 20%"><p>北京地区</p></div>', //信息窗体的内容可以是任意html片段
        												offset: new AMap.Pixel(16, -45)
        											});
													var onMarkerClick  =  function(e) {
        												infoWindow.open(map, e.target.getPosition());//打开信息窗体
        												//e.target就是被点击的Marker
        											}
        											var marker = new AMap.Marker({
        												position:[116.39, 39.9]
        												
        											})
        											map.add(marker);
        											marker2 = new AMap.Marker({
        												position:[112.625368,37.695841]
        												
        											})
        											map.add(marker2);
        											marker3 = new AMap.Marker({
        												position:[111.76701,40.890321]
        											})
        											map.add(marker3);
        											marker4 = new AMap.Marker({
        												position:[119.963006,31.817282]
        											})
        											map.add(marker4);
        											marker5 = new AMap.Marker({
        												position:[120.326353,31.522251]
        											})
        											map.add(marker5);
        											marker6 = new AMap.Marker({
        												position:[108.982973,34.310819]
        											})
        											map.add(marker6);
        											marker.on('click',onMarkerClick);
        											var circle = new AMap.Circle({
        												center: new AMap.LngLat(116.39,39.9),  
        												radius: 2000, 
        												fillColor: 'red',   
        												strokeColor: '#fff', 
        												strokeWeight: 2, 
        											});

        											map.add(circle);
        										</script>
        									</div>
        								</div>
        							</div>
        						</div>
        					</div>
        				</div>
        			</div>
        		</div>
        	</div>

        </div>

        <!-- Custom template | don't include it in your project! -->
        <div class="custom-template">
        	<div class="title">设置</div>
        	<div class="custom-content">
        		<div class="switcher">
        			<div class="switch-block">
        				<h4>导航栏颜色</h4>
        				<div class="btnSwitch">
        					<button type="button" class="changeMainHeaderColor" data-color="blue"></button>
        					<button type="button" class="changeMainHeaderColor" data-color="purple"></button>
        					<button type="button" class="changeMainHeaderColor" data-color="light-blue"></button>
        					<button type="button" class="changeMainHeaderColor" data-color="green"></button>
        					<button type="button" class="selected changeMainHeaderColor" data-color="orange"></button>
        					<button type="button" class="changeMainHeaderColor" data-color="red"></button>
        				</div>
        			</div>
        			<div class="switch-block">
        				<h4>背景颜色</h4>
        				<div class="btnSwitch">
        					<button type="button" class="changeBackgroundColor" data-color="bg2"></button>
        					<button type="button" class="changeBackgroundColor selected" data-color="bg1"></button>
        					<button type="button" class="changeBackgroundColor" data-color="bg3"></button>
        				</div>
        			</div>
        		</div>
        	</div>
        	<div class="custom-toggle">
        		<i class="flaticon-settings"></i>
        	</div>
        </div>
        <!-- End Custom template -->
    </div>
    <!--   Core JS Files   -->
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="../assets/js/core/popper.min.js"></script>
    <script src="../assets/js/core/bootstrap.min.js"></script>
    <!-- Chart JS -->
    <script src="../assets/js/plugin/chart.js/chart.min.js"></script>
    <!-- jQuery UI -->
    <script src="../assets/js/plugin/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
    <script src="../assets/js/plugin/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js"></script>
    <!-- Moment JS -->
    <script src="../assets/js/plugin/moment/moment.min.js"></script><!-- DateTimePicker -->

    <!-- Bootstrap Toggle -->
    <script src="../assets/js/plugin/bootstrap-toggle/bootstrap-toggle.min.js"></script>
    <script src="../assets/js/plugin/bootstrap-notify/bootstrap-notify.min.js"></script>
    <!-- jQuery Scrollbar -->
    <script src="../assets/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>
    <!-- jQuery Sparkline -->
    <script src="../assets/js/plugin/jquery.sparkline/jquery.sparkline.min.js"></script>
    <!-- Azzara JS -->
    <script src="../assets/js/ready.min.js"></script>
    <!-- Azzara DEMO methods, don't include it in your project! -->
    <script src="../assets/js/setting-demo.js"></script>
    <!-- Chart Circle -->
    <script src="../assets/js/plugin/chart-circle/circles.min.js"></script>
</body>
</html>